{extend name="template/base" /}
{block name="content"}

<div class="page-container" style="width: 80%;margin: 0 auto;">
    <div class="cl pd-5 bg-1 bk-gray" style="margin-bottom:15px;">
		<input style="margin-left:15px;background-color:#28a3ef;color:#fff;" class="btn" id="btnPrint" type="button" value="打印学员信息" onclick="preview(1)" />
    </div>
	<!-- 表单 -->
	<!--startprint1-->
		<style>
			body{}
			@page {size: A4 portrait;}
			.border-just-has-bottom{border:1px solid #fff;border-bottom:1px solid #000;}
			.border-just-has-top{border:1px solid #fff;border-top:1px solid #000;}
			.border-left-right{border:1px solid #fff;border-left:1px solid #000;border-right:1px solid #000;}
			.border-left{border:1px solid #fff;border-left:1px solid #000;}
			.border-right{border:1px solid #fff;border-right:1px solid #000;}
			.border-none{border:1px solid #fff;}
			.print_table{width:23cm;margin-left:18px;}
			.print_table td{font-size:18px !important;}
			.print_table .serial{height:30px;border:none;padding-bottom:2px;}
			.card_type {background-color: #FFF; border: 1px solid #000;height:20px !important;width:20px !important;display: inline-block;margin-right: 5px;position: relative;display: flex;align-items: center;
			}
			.card_type img{height:12px;width:12px;position: absolute;left: 2px;}
			.tc{text-align: center;font-size: 18px;}
		
			.tit{
				margin:10px 0;
				text-align: center;
				font-weight: bold;
				font-size: 14px!important;
			}
			.route{line-height: 20px;vertical-align: middle;display: inline-block;margin-right: 5px;}
			.result{line-height: 25px;vertical-align: middle;display: inline-block;margin-right: 50px;margin-left: 15px;}
		</style>
		<table border="1" class="print_table">
		  <tr style="height:70px;border:1px solid transparent;">
			<td colspan="5" style="text-align:center;padding-left:2px;border:1px solid transparent;">
				<span style="font-size:32px;font-weight:600;">{$info.title}</span>
			</td>
		  </tr>

		<tr class="border-none" style="height:50px;border:1px solid transparent;border-bottom:1px solid #000;">
				
				<td style="border:1px solid transparent;font-size:16px;border-bottom:1px solid #000;font-size:24px;" colspan="4">序列号：<input class="serial"  name="serial" value="{$member.serial}" style="border:none;font-size:16px;padding-bottom:2px;font-size:24px;"/></td>
				<td style="border:1px solid transparent;font-size:16px;border-bottom:1px solid #000;border-collapse:collapse;font-size:24px;" colspan="1">座号:<text class="serialCount">{$serialCount}</text></td>
			  </tr>
		  <tr style="height:70px;">
		  	<td width="120px;" style="text-align:center;padding-left:2px;font-size:22px !important;border:1px solid #000;">姓名</td>
		  	<td  style="padding-left:10px;font-size:20px !important;border:1px solid #000;width: 100px;">
		  		{$member.name}
		  	</td>
		  	<td width="120px;"  style="text-align: center;font-size:22px !important;border:1px solid #000;border-top:1px solid #000">身份证<div>号码</div></td>
		  	<td id="card_num" style="padding-left:10px;font-size:22px !important;border:1px solid #000;border-top:1px solid #000">
		  		{$member.card_num}
		  		
		  	</td>
		  	<td rowspan="2" colspan="2" id="avator" style="width:5.5cm;height:7.5cm;text-align:center;vertical-align:middle;border:1px solid #000;">
				{if condition="empty($member.avator)"}
					相片
				{else /}
					<img style="width:5.5cm;height:7.5cm;"	src="/{$member.avator}" />
				{/if}
			</td>
		  </tr>
		  <tr>
		  	
		  	<td width="100px" style="text-align: center;font-size:20px !important;border:1px solid #000;border-top:1px solid transparent">所属驾校</td>
		
		  	<td colspan="3" style="padding:40px 0 50px 10px;font-size:20px !important;border:1px solid #000;border-top:1px solid transparent;">
		  		 <div style="display: flex;align-items: center;flex-wrap: wrap;">
		  		{volist name="school" id="vo" key="k"}
		  			<div style="margin-bottom:10px;line-height: 25px;vertical-align: middle;display: flex;margin-right: 30px;">
		  				
						<span style="font-size:22px;margin-right: 5px;">{$vo['name']}</span>
						{if condition="$vo.name eq $member.school"}
						<div for="check{$k}" id="label{$k}" class="card_type"><text style="font-size: 26px;font-weight: bold;">√</text></div>
				  		{else /}
				  		<div for="schoolItem{$k}" id="schoolLabel{$k}" data-k="{$k}" class="schoolLabel" style="background-color: #FFF; border: 1px solid #000;height:20px !important;width:20px !important;display: inline-block;">
				  		</div>
						{/if}
			  		</div>
		  		 {/volist}
		  		 </div>
		  	</td>
		  </tr>
		  <tr style="height: 60px">
		  	<td width="120px;" style="text-align: center;font-size:22px !important;border:1px solid #000;border-top:1px solid transparent">申请车型</td>
		  	<td colspan="4"  style="padding:0 10px;font-size:22px !important;border:1px solid #000;border-top:1px solid transparent">
		  		<div style="display: flex;align-items: center;">
		  	 {volist name="card_type" id="vo" key="k"}
					{if condition="$vo.id eq $member.car_type"}
						<div style="display: flex;align-items: center;margin-right: 20px;">
							<Span style="font-size: 22px;margin-right: 5px;">{$vo.name}</span>
							<div for="check{$k}" id="label{$k}" class="card_type"><text style="font-size: 26px;font-weight: bold;">√</text></div>
						</div>
					{else /}
						<div style="display: flex;align-items: center;margin-right: 20px;">
							<Span style=" font-size: 22px;margin-right: 5px;">{$vo.name}</span>
							<div for="check{$k}" id="label{$k}" class="card_type"></div>
						</div>
					{/if}
				{/volist}
			</div>
		  	</td>
		  </tr>
		   <tr>
		  	<!-- <td width="120px;" style="text-align: center;font-size:20px !important;border:1px solid #000;border-top:1px solid transparent">培训路口</td> -->
		  	<td colspan="6" style="padding:10px 25px 0px 15px;font-size:20px !important;border:1px solid #000;">
		  		<div style="display:line-block; float:left;font-size: 22px">场次：</div>
		  		<div style="display: flex;align-items: center;flex-wrap: wrap;">
			  		{volist name="times" id="vo" key="k"}
			  			{if condition="$vo eq $member.times"}
							<div style="display: flex;align-items: center;margin-right: 20px;">
								<div for="check{$k}" id="label{$k}" class="card_type"><text style="font-size: 26px;font-weight: bold;">√</text></div>
								<Span style="font-size: 22px;margin-right: 5px;">{$vo}</span>
								
							</div>
						{else /}
							<div style="display: flex;align-items: center;margin-right: 20px;">
								<div for="check{$k}" id="label{$k}" class="card_type"></div>
								<Span style=" font-size: 22px;margin-right: 5px;">{$vo}</span>
								
							</div>
						{/if}
							
					{/volist}
				</div>
		  	<td>
		  </tr>
		</table>
		<div style="padding: 0 20px;">
			<div style="font-weight: 400;font-size: 28px;margin-top: 10px;">一、交通安全文明驾驶常识教育</div>
			<div style="font-size:22px;line-height: 36px;">1、车辆起步前，驾驶人应对车辆周围交通情况进行观察，确认安全时再开
	始起步;2、行车中从其他道路汇入车流前，应注意观察侧后方车辆的动态;3、
	驾驶车辆进入交叉路口前，应降低行驶速度注意观察，确认安全;4、车辆通过
	学校和小区应注意观察标志标线，低速行驶，不要鸣喇叭;5、车辆不得在高速
	公路匝道上掉头、倒车;6、驾驶机动车经过漫水路、漫水桥时，应停车察明水
	情，确认安全后再通过;7、行车中遇儿童时，应减速慢行，必要时停车避让;8、
	行车中遇抢救伤员的救护车从本车道逆向驶来时，须减速或靠边停车让行;9、
	车辆驶近人行横道时，先减速注意观察行人、非机动车动态，确认安全后再通过;10、机动车通过没有交通信号的交叉路口时减速慢行。</div>
			<div style="font-weight: 400;font-size: 24px;margin-top: 10px;margin-bottom: 5px;">二、交通事故案例警示教育</div>
			<div style="font-size:22px;margin-bottom: 5px; ">1、观看交通事故案例警示教育宣传片;</div>
			<div style="font-size:22px;margin-bottom: 5px;">2、浏览交通安全橱窗(宣传栏);</div>
			<div style="font-size:22px;margin-bottom: 5px;">3、阅读交通事故案例宣传资。</div>
			<div style="margin-top: 20px"><text style="margin-right: 20px;font-size:24px;">三、培训结果:</text>
				<text  style="font-size:24px;">合格</text><div style="line-height: 30px;vertical-align: middle;display: inline-block;margin-right: 50px;margin-left: 15px;">
				  		{if condition="$member.finish == '合格'"}
							<div style="display: flex;align-items: center;margin-right: 20px;">
								<div for="check{$k}" id="label{$k}" class="card_type"><text style="font-size: 26px;font-weight: bold;">√</text></div>
							</div>
							{else /}
							<div style="display: flex;align-items: center;margin-right: 20px;">
								<div for="check{$k}" id="label{$k}" class="card_type"></div>
								
							</div>
						{/if}
			  		</div> 

		  		<text  style="font-size:24px;">不合格</text><div style="line-height: 30px;vertical-align: middle;display: inline-block;margin-right: 50px;margin-left: 15px;">
			  		{if condition="$member.finish == '不合格'"}
							<div style="display: flex;align-items: center;margin-right: 20px;">
								<div for="check{$k}" id="label{$k}" class="card_type"><text style="font-size: 26px;font-weight: bold;">√</text></div>
							</div>
							{else /}
							<div style="display: flex;align-items: center;margin-right: 20px;">
								<div for="check{$k}" id="label{$k}" class="card_type"></div>
								
							</div>
						{/if}
		  		</div>
		  		<input type="text" name="finish" style="display: none" class="result" value="">
		  	</div>
		  	<div style="font-size:22px;margin-top: 10px;">四、学员培训合格后请把表格拍照片上传到<text style="text-decoration: underline;">钦州驾考通</text>。</div>
		</div>
<!-- 		 <div style="text-align: center;margin-top: 30px;"><img src='__STATIC__/images/code01.jpg' style="width: 180px;height: 180px;margin-right: 50px"><img src='__STATIC__/images/code02.jpg' style="width: 180px;height: 180px"></div> -->
	<!--endprint1-->
</div>
{/block}
{block name='script'}
<script>
	var HKEY_Root,HKEY_Path,HKEY_Key;   
	HKEY_Root="HKEY_CURRENT_USER";   
	HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";   
	//设置网页打印的页眉页脚为空 ，仅IE浏览器可用  
	function PageSetup_Null()   
	{   
		try   
		{   
			var Wsh=new ActiveXObject("WScript.Shell");   
			HKEY_Key="header";   
			Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");   
			HKEY_Key="footer";   
			Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");   
		}   
		catch(e)   
		{}   
	}   
	  
	//设置网页打印的页眉页脚为默认值 ，仅IE浏览器可用  
	function PageSetup_Default()   
	{   
		try   
		{   
			var Wsh=new ActiveXObject("WScript.Shell");   
			HKEY_Key="header";   
			//Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P"); 
			Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");   
			HKEY_Key="footer";   
			Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d");  

			
		}   
		catch(e)   
		{}   
	}
	function preview(oper)         
	{  
		if (oper < 10)  
		{  
			try{
                print.portrait   =  false    ;//横向打印 
            }catch(e){
                alert("浏览器不支持程序设置横向打印，如需横向打印请在打印时对打印机设置横向打印");
            }
			bdhtml=window.document.body.innerHTML;//获取当前页的html代码

			sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域  
			eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域  
			prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html  
			prnhtmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html		
			window.document.body.innerHTML=prnhtml; 
			window.frames.focus();//由于使用frame弹窗，为了防止IE打印到父级页面，这里加上这句只打印iframe
			if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
				PageSetup_Default();
				PageSetup_Null();
			}
			$(".check").eq(1).attr("checked","checked");
			window.document.close();			
			window.print();  
			window.document.body.innerHTML=bdhtml;
			document.getElementByTagName("body").style.margin="20px";			
		}
		else 
		{   
			document.getElementById("info").style.marginLeft="-100px";
			window.print();  
		}  
	}
	
	$(document).ready(function () {  //选择区域
		var img="<img src='__STATIC__/images/check.png' />";
		$(".check").change(function() {
			var k=$(this).attr("data-k");
			$(".card_type").html("");
			$("#label"+k).html(img);
		});
	});
</script>  
{/block}
